<template>
    <div class="edit-box" teleport="body">
        <h1>修改管理员信息</h1>
        <el-form :model="admin" label-width="120px">
            <el-form-item label="Banner缩略图">
                <span>{{ admin.img }}</span>
            </el-form-item>
            <el-form-item label="名称">
                <span>{{ admin.name }}</span>
            </el-form-item>
            <el-form-item label="类型">
                <el-input v-model="admin.filge" />
            </el-form-item>
            <el-form-item label="添加人">
                <el-input v-model="admin.add" />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="saveFn">修改</el-button>
                <el-button type="primary" @click="cancleFn">取消</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>
      
<script setup lang="ts">
import { ElMessage } from 'element-plus';
import 'element-plus/dist/index.css';
import { reactive, watch } from 'vue'

import service from '@/utils/request'

//声明属性
const props = defineProps<{
    id: any
}>()


//声明事件
const emit = defineEmits<{
    (e: "hide"): void
    (e: "updatesuccess"): void
}>()

interface IAdmin {
    "id": number,
    "img": string,
    "name": string,
    "filge": boolean,
    "add": string,
    "time": string
}


var admin = reactive<IAdmin>({
    "id": 1,
    "img": 'https://ts2.cn.mm.bing.net/th?id=ORMS.9cf03baee3f5b88988d4ee943572defd&pid=Wdp&w=300&h=156&qlt=90&c=1&rs=1&dpr=1&p=0',
    "name": '',
    "filge": true,
    "add": '',
    "time": ''
})

//取消
const cancleFn = () => {
    //触发隐藏事件
    emit("hide");
}


//获取管理员的信息:根据aid进行获取
const getAdminDetail = () => {
    service({
        url: "http://localhost:3000/bannerlist",
        params: {
            id: props.id
        }
    }).then(res => {
            console.log(res.data);
            admin.img = res.data[0].img;
            admin.name = res.data[0].name;
            admin.filge = res.data[0].filge;
            admin.add = res.data[0].add;
    })
}

watch(props, () => {
    getAdminDetail();
}, {
    deep: true
})


const saveFn = () => {
    service({
        // url: "http://localhost:3000/bannerlist",
        url: `http://localhost:3000/bannerlist/${props.id}`,
        method: "patch",
        data: {
            // img: admin.img,
            // name: admin.name,
            filge: admin.filge,
            add: admin.add,
        }
    })
        .then(res => {
          
                ElMessage({
                    message: "修改成功,宝子!",
                    type: "success"
                })
                emit("hide");
                emit("updatesuccess");
        })
}
</script>
      
<style scoped>
.edit-box {
    width: 400px;
    height: 300px;
    border: 1px solid #ededed;
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background-color: rgba(241, 205, 211, 0.842);
    z-index: 999;
}
</style>